<template>
  <div class="main">
    <el-steps :space="90" :active="0" finish-status="success" align-center>
      <el-step title="上传应用"></el-step>
      <el-step title="完善资料"></el-step>
      <el-step title="等待审核"></el-step>
      <el-step title="设置上线"></el-step>
    </el-steps>

    <el-upload class="upload-box"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      drag
      :action='uploadUrl'
      :headers="headers"
      :limit="1"
      :on-exceed="handleExceed">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">提示:只能上传apk或ipa应用包</div>
    </el-upload>
    <p class="tip">
      <!-- 已支持同版本更新功能,如进行此操作,已安装历史版本的用户不会收到更新通知.请谨慎选择 -->
    </p>

    <!-- 上传包文件成功后的对话框 -->
    <el-dialog title="应用包文件信息" :visible.sync="dialogFormVisible">
      <el-form :model="packageInfo">
        <el-form-item label="应用包名:">
          <span>{{packageInfo.packageName}}</span>
        </el-form-item>
        <el-form-item label="应用名称:">
          <span>{{packageInfo.appName}}</span>
        </el-form-item>
        <el-form-item label="应用版本:">
          <span>{{packageInfo.version}}</span>
        </el-form-item>
        <el-form-item label="默认语言:">
          <span>{{packageInfo.lang}}</span>
        </el-form-item>
        <el-form-item label="系统支持:">
          <span>{{packageInfo.osSupport}}</span>
        </el-form-item>
        <el-form-item label="权限列表:">
          <span v-for="item in packageInfo.permissionList">{{item}};</span>
        </el-form-item>
        <el-form-item label="文件大小:">
          <span>{{packageInfo.size}}kb</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="cancel">重新上传</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  // import { uploadAppPack } from '@/api/apps'
  import { getToken } from '@/utils/auth'

  export default {
    data(){
      return {
        dialogFormVisible: false,
        packageInfo: '',
        uploadUrl: `https://easy-mock.com/mock/5a1629998eb5f73bfafa4e9f/api/apps/${this.$route.query.id}/package`,
        headers: {
          'X-Token': getToken()
        },
        fileList: []
      }
    },
    methods:{
      handleSuccess(res, file){
        this.packageInfo = res.data.packageInfo
        this.dialogFormVisible = true
      },
      handleExceed(files, fileList) {
        window.alert(1111)
        this.$message.warning('请先删除已上传的文件');
      },
      beforeUpload(file){
        // 检查是否为应用包
        // if(file.type != 'application/vnd.android.package-archive'){
        //   this.$message.error('请选择正确的应用包文件');
        //   return false
        // }
        // 将应用包文件以Formdata的格式上传,覆盖掉element-ui的默认上传方式
        // let formdata = new FormData()
        // formdata.append('package', file)
        // uploadAppPack(this.$route.query.id, formdata)
        // return;
      },
      cancel(){
        this.dialogFormVisible = false
        this.fileList = []
      },
      next(){
        this.$router.push({
          name: 's1',
          query: {
            id: this.$route.query.id
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    .el-form-item{
      margin-bottom: 0;
    }
    .el-steps{
      min-width: 300px;
      justify-content: center;
    }
    .upload-box{
      margin-top: 80px;
    }
    .upload-box-wrapper{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 720px;
      height: 380px;
      margin-top: 60px;
      border-radius: 6px;
      border: 1px solid #eee;
      .upload-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

    }
    .tip{
      // position: absolute;
      // bottom: 20px;
      font-size: 10px;
    }
  }
</style>
